<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 888px;
            height: 660px;
            /* background-color: gray; */
            box-shadow: 0 0 2px gray;
            margin: 0 auto;
            margin-top: 110px;
            overflow: hidden;
        }

        .content .title {
            text-align: center;
            margin-top: 60px;
            font-size: 20px;
            font-weight: bold;
        }

        form {
            width: 520px;
            /* height: 300px; */
            margin: 0 auto;
            /* background-color: gray; */
            /* border: 1px solid black; */
            overflow: hidden;
        }

        .leftfix {
            float: left;
        }

        .rightfix {
            float: right;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        input {
            box-sizing: border-box;
            height: 38px;
            padding-left: 10px;
            width: 378px;
            margin-right: 20px;
        }

        label {
            line-height: 38px;
            font-weight: bold;
        }

        .mt {
            margin-top: 10px;
            position: relative;
        }

        .eye {
            position: absolute;
            right: 28px;
            top: 10px;
            width: 20px;
            cursor: pointer;
        }

        .doregist {
            box-sizing: border-box;
            height: 38px;
            width: 378px;
            background-color: rgb(241, 44, 44);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            margin-top: 10px;
            margin-right: 20px;
            cursor: pointer;
        }

        .warn {
            font-size: 12px;
            display: block;
            line-height: 20px;
            margin-left: 120px;
            color: red;
            background-image: url(images/icon_tips.png);
            background-repeat: no-repeat;
            padding-left: 20px;
            visibility: hidden;
        }

        .captcha {
            position: absolute;
            right: 20px;
            top: 0;
            height: 38px;
            /* margin-right: 20px; */
            border-radius: 5px;
            box-sizing: border-box;
            border: 1px solid gray;
        }

        .getCode {
            position: absolute;
            right: 20px;
            height: 38px;
            width: 110px;
        }

    </style>
</head>

<body>

    <div class="content">
        <div class="title">注册账号</div>
        <div class="table">
            <form action="#">
                <div class="account clearfix mt">
                    <input class="rightfix" type="text" name="account" id="account" placeholder="账号仅用于您个人登录，不会公开显示。">
                    <label class="rightfix" for="account">账号：</label>
                </div>
                <span class="account-warn warn">请输入6-16位字母数字组合的账号（不区分大小写）</span>

                <div class="password clearfix mt">
                    <input class="rightfix" type="password" name="pwd" id="pwd"
                        placeholder="请输入8-30位数字、大小写字母或常用符号，任意3种"></input>
                    <label class="rightfix" for="pwd">密码：</label>
                    <img class="eye" src="images/icon_eye_no.png" alt="eye">
                </div>
                <span class="pwd-warn warn">请输入8-30位,必须包含 大/小写字母/数字/特殊符号任意3种组合</span>

                <div class="repassword clearfix mt">
                    <input class="rightfix" type="password" name="repwd" id="repwd" placeholder="再次输入密码">
                    <label class="rightfix" for="repwd">确认密码：</label>
                    <img class="eye" src="images/icon_eye_no.png" alt="eye">
                </div>
                <span class="repwd-warn warn">两次输入的密码不一致</span>

                <div class="verify clearfix mt">
                    <input class="rightfix" type="text" name="verify" id="verify" placeholder="请输入右边的验证码">
                    <label class="rightfix" for="verify">验证码：</label>
                    <img class="captcha" src="images/captchaCode.jpeg" alt="captcha">
                </div>
                <span class="verify-warn warn">验证码错误</span>

                <div class="phone clearfix mt">
                    <input class="rightfix" type="text" name="tel" id="tel" placeholder="手机号仅会用于您个人登录，不会公开显示">
                    <label class="rightfix" for="tel">手机号：</label>
                </div>
                <span class="tel-warn warn">请输入正确的手机号</span>

                <div class="code clearfix mt">
                    <input class="rightfix" type="text" name="code" id="code" placeholder="输入短信验证码">
                    <label class="rightfix" for="code">短信验证码：</label>
                    <button class="getCode" disabled>获取验证码</button>
                </div>
                <span class="code-warn warn">验证码不能为空</span>

                <div class="btn clearfix">
                    <button class="doregist rightfix">马上注册</button>
                </div>

                <div class="read" style="text-align: center; margin-top: 10px;">
                    <input type="checkbox" name="haveread" id="haveread"
                        style="width: 15px; padding: 0; margin: 0; height: 15px; vertical-align: middle;">
                    <span style="font-size: 14px; color: gray;">我已仔细阅读并同意<span
                            style="color: blue; cursor: pointer;">《注册协议》</span></span>
                </div>
            </form>
        </div>
    </div>


<script>
    let account = document.querySelector("#account")
    let pwd = document.querySelector("#pwd")
    let repwd = document.querySelector("#repwd")
    let verify = document.querySelector("#verify")
    let tel = document.querySelector("#tel")
    let code = document.querySelector("#code")
    let send_btn = document.querySelector(".getCode")
    let regist_btn = document.querySelector(".doregist")
    let haveread = document.querySelector("#haveread")

    // console.log(account, pwd, repwd, verify, tel, code)
    const account_reg = /^[a-zA-Z0-9]{6,16}$/i
    const pwd_reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_][\x00-\xff]{8,30}$/
    const tel_reg = /^1[3-9][0-9]{9}$/

    function doRegCheck(component, regex, name) {
        let value = component.value
        let warnspan = document.querySelector(`.${name}-warn`)
        if (regex.test(value)) {
            warnspan.style.visibility = "hidden"
            return true
        } else {
            warnspan.style.visibility = "visible"
            return false
        }
    }

    account.addEventListener("input", function() {
        doRegCheck(this, account_reg, "account")
    })

    function repwdRegex() {
        this.test = function(p) {
            return p === pwd.value
        }
    }

    let rg = new repwdRegex()

    pwd.addEventListener("input", function() {
        doRegCheck(this, pwd_reg, "pwd")
        doRegCheck(repwd, rg, "repwd")
    })

    repwd.addEventListener("input", function() {
        doRegCheck(pwd, pwd_reg, "pwd")
        doRegCheck(this, rg, "repwd")
    })

    tel.addEventListener("input", function() {
        let res = doRegCheck(this, tel_reg, "tel")
        if (res) send_btn.disabled = false
        else send_btn.disabled = true
    })

    function verifyRegex() {
        this.test = function(p) {
            return p === "2954"
        }
    }

    verify.addEventListener("input", function() {
        doRegCheck(this, new verifyRegex(), "verify")
    })

    function codeRegex() {
        this.test = function(p) {
            if (p) return true
            return false
        }
    }

    code.addEventListener("input", function() {
        doRegCheck(this, new codeRegex(), "code")
    })


    let eye_list = document.querySelectorAll(".eye")
    eye_list.forEach(function(btn) {
        btn.addEventListener("click", function() {
            let curinput = this.previousElementSibling.previousElementSibling
            if (curinput.type == "password") curinput.type = "text"
            else curinput.type = "password"
        })
    })

    function doCheck() {
        let flag = true
        if (!doRegCheck(account, account_reg, "account")) flag = false
        if (!doRegCheck(pwd, pwd_reg, "pwd")) flag = false
        if (!doRegCheck(repwd, new repwdRegex(), "repwd")) flag = false
        if (!doRegCheck(tel, tel_reg, "tel")) flag = false
        if (!doRegCheck(verify, new verifyRegex(), "verify")) flag = false
        return flag
    }

    let ctndown = 0
    let n = 0
    send_btn.addEventListener("click", function(e) {
        e.preventDefault()
        if (doCheck()) {
            ctndown = 3
            send_btn.textContent = `重新发送(${ctndown--})`
            send_btn.disabled = true
            n = setInterval(function() {
                if (ctndown >= 0) {
                    send_btn.textContent = `重新发送(${ctndown--})`
                } else {
                    send_btn.textContent = "重新发送"
                    send_btn.disabled = false
                    clearInterval(n)
                }
                
            }, 1000)
        }
    })

    function verifyCode(code) {
        return code === "111111"
    }

    regist_btn.addEventListener("click", function(e) {
        e.preventDefault()
        if (!doCheck()) return
        if (!doRegCheck(code, new codeRegex(), "code")) return
        if (!haveread.checked) {
            alert("请先同意用户协议")
            return
        }
        if (verifyCode(code.value)) {
            alert("注册成功，3秒后自动跳转登陆页面")
            setTimeout(function() {
                location.href = "https://www.baidu.com"
            }, 3000)
        } else {
            alert("验证码错误")
        }
    })

</script>
</body>

</html>